<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<jsp:include  page="../common/file.jsp"/>
<html>
<head>
	<!-- lrz.bundle.js -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/localResizeIMG4/lrz.bundle.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/localResizeIMG4/imageserialize.js"></script>
</head>
<body class="dialog_body">
<form id="submit_form" action="${pageContext.request.contextPath}/user/insert" method="post" target="_parent">
	<input type="hidden" id="roleIds" name="roleIds"/>
	<div class="dialog-four-div">
	<div class="dialog-title">
		<i class="fa fa-minus-square"></i>账号基本信息
	</div>
	<table class="dialog-four-table">
		<tr>
			<td class="dialog-td-right">账号</td>
			<td class="dialog-td-left">
				<input type="text" id="account" name="account" maxlength="20" validate="not-null"/>
				<span class="redtext">*</span>
				<div style="clear:both;display:none"></div>
				<span id="sameAccount" style="margin-left:0px"></span>
			</td>
			<td class="dialog-td-img" colspan="2" rowspan="5">
				<input type="file" id="file" name="file" value="" style="display: none;"/>
				<div id="pre-image-div" class="iamge-pre" style="display: block">
				</div>
				<img class="beforeShowImg" style="width:196px;height:200px;" src="../assets/images/beforeShowImg.jpg">
				<input type="hidden" id="path" name="path" />
			</td>
		</tr>
		<tr>
			<td class="dialog-td-right">密码</td>
			<td class="dialog-td-left">
				<input type="text" id="password" name="password" maxlength="20" value="" validate="not-null,password"/>
				<span class="redtext">*</span>
				<div style="clear:both;display:none"></div>
				<span id="samePassword" style="margin-left:0px"></span>
			</td>
		</tr>
		<tr>
			<td class="dialog-td-right">手机号码</td>
			<td class="dialog-td-left">
				<input type="text" id="mobileNo" name="mobileNo" maxlength="30" validate="telephone"/>
				<div style="clear:both;display:none"></div>
				<span id="sameMobileNo" style="margin-left:0px"></span>
			</td>
		</tr>
		<tr>
			<td class="dialog-td-right">所属单位</td>
			<td class="dialog-td-left">
				<select class="select" id="organId" name="organId" style="width: 200px; height: 30px;"></select>
				<span class="redtext">*</span>
				<div style="clear:both;display:none"></div>
				<span id="sameOrganId" style="margin-left:0px"></span>
			</td>
		</tr>
		<tr>
			<td class="dialog-td-right">所属角色</td>
			<td class="dialog-td-left">
				<select class="select" id="roleId" name="roleId" style="width: 200px; height: 30px;"></select>
				<span class="redtext">*</span>
				<div style="clear:both;display:none"></div>
				<span id="sameRoleId" style="margin-left:0px"></span>
			</td>
		</tr>
		<tr>
			<td class="dialog-td-right">账号状态</td>
			<td class="dialog-td-left">
				<select class="chosen-select form-control" id="status" name="status">
                    <option value="1">有效</option>
					<option value="0">注销</option>
                </select>
			</td>
			<td class="dialog-td-right">图片</td>
			<td class="dialog-td-left">
				<input type="text" id="image" name="image" style="width: 135px;" placeholder="请选择头像 . . ." readonly="readonly"/>
				<a href="javascript:;" class="upload-btn">浏 览</a>
			</td>
		</tr>
	</table>
	<table class="dialog-four-table dialog-table-submit">
		<tr class="dialog-four-button">
			<td colspan=4 >
				<button type="button" class="btn btn-warning submit-btn">提 交</button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button type="button" class="btn btn-default cancel-btn" target="_self">返 回</button>
			</td>
		</tr>
	</table>
	</div>
	<script type="text/javascript">
		//下拉菜单树(所属单位)
		var ctxt = "${pageContext.request.contextPath}";
		$('#organId').combotree({
		    url : ctxt+'/organ/findAllTrees',
		    parentField : 'pid',
		    lines : true,
		    panelHeight : 'auto',
		    panelWeight : 'auto',
		    value: '${user.organId}',
		    onBeforeSelect:function(node) {
		    	if (!$("#organId").combotree("tree").tree('isLeaf', node.target)) {
                    return false;
                }
		    }
		});
		
		//下拉菜单树(所属角色)
		var ctxt = "${pageContext.request.contextPath}";
		$('#roleId').combotree({
		    url : ctxt+'/role/findAllTree',
		    multiple: true,
		    panelHeight : 'auto',
		});
		
		// 图片处理
		$('.upload-btn, #image, .beforeShowImg').click(function() {
			$('#file').click();
		});
		var serializ = new Imageserialize({
			ipt: '#path',
			pre: '#pre-image-div',
			width: 280, height: 200
		});
		$('#file').change(function() {
			var self = this, path = self.value;
			serializ.init(self.files[0]);
			var fileName = self.files[0].name;
			if (!/\.(jpg|jpeg|png|JPG|PNG|bmp|BMP)$/.test(fileName)) {
				art.dialog.alert('图片类型必须是.jpeg,jpg,png,bmp中的一种！', 2);
				$(".beforeShowImg").css("display", "inline-block");
				$("#pre-image-div").css("display","none");
				$("#image").val('');
				return false;
			}
			$(".beforeShowImg").css("display", "none");
			$(".showImg").css("display","none");
			$("#pre-image-div").css("display","inline-block");
			$("#image").val(path.substring(path.lastIndexOf("\\") + 1));
		});
		
	
		//账号重复检测
		$('#account').bind('input propertychange', function() {
			var ctxt = "${pageContext.request.contextPath}";
			var account = $('#account').val();
			$.post(ctxt + "/user/sameCheckAccount", {"account": account}, function(msg) {
				if (msg != undefined && msg.status == "1") {
					//$('#sameAccount').html("<input style='border:0px;background-color:#e4e7e7;color:#ff8000;' readonly='readonly' type='text' value='已有相同的用户账号！' class='sameAccount' />");
					$('#sameAccount').html("<font style='float:left' color='red'>已有相同的账号！</font>");
					$('.submit-btn').hide();
				} else {
					$('#sameAccount').html("");
					$('.submit-btn').show();
				}
			}, "json");
		});
		
		//手机号码重复检测
		$('#mobileNo').bind('input propertychange', function() {
			var ctxt = "${pageContext.request.contextPath}";
			var mobileNo = $('#mobileNo').val();
			$.post(ctxt + "/user/sameCheckMobileNo", {"mobileNo": mobileNo}, function(msg) {
				if (msg != undefined && msg.status == "1") {
					//$('#sameMobileNo').html("<input style='border:0px;background-color:#e4e7e7;color:#ff8000;' readonly='readonly' type='text' value='已有相同的手机号码！' class='sameMobileNo' />");
					$('#sameMobileNo').html("<font style='float:left' color='red'>已有相同的手机号码！</font>");
					$('.submit-btn').hide();
				} else {
					$('#sameMobileNo').html("");
					$('.submit-btn').show();
				}
			}, "json");
		});
		
		//提交保存
		function submitForm() {
			
			var $organId = $("input[name$='organId']").val();
			if ($.trim($organId) == '') {
				$('#sameOrganId').html("<font style='float:left' color='red' class='unvalidate-info'>请选择所属单位！</font>");
				return false;
			}
			
			var account = $("#account").val();
			var geo = account.match(/[^\uff00-\uffff]/); 
			if (geo == null) {
				$('#sameAccount').html("<font style='float:left' color='red' class='unvalidate-info'>请半角输入账号！</font>");
				return false;
			}
			
			var $roleId = $("*[name='roleId']").map(function(){return $(this).val()}).get().join(",");
			if ($.trim($roleId) == '') {
				$('#sameRoleId').html("<font style='float:left' color='red' class='unvalidate-info'>请选择所属角色！</font>");
				return false;
			}
			
			$("#roleIds").val($roleId);
			
			$(".submit-btn").unbind("click");
			$('#submit_form').submit();
			
			return true;
		}
		
		//关闭窗口
		$('.cancel-btn').click(function() {
			art.dialog.close();
		});
	
		//下拉框初始化图形
		$(".chosen-select").chosen({disable_search_threshold: 10});
	</script>
	</form>
</body>
</html>